<template>
    <div class="bac wrapper">
        <!-- 封装的load组件，用法：当当前页面数据已经请求回来的时候show的值动态传个true，没回来的时候动态传false -->
        <load v-if="!show"></load>

        <div v-if="show" class="content">

            <div class="search" ref=search :class="ssearch?'':'red'">
            <!-- <div class="search scrollactive"> -->
                <p class="area" @click="address" v-show="ssearch">{{city_name}}</p>
                <p class="area" @click="All" v-show="!ssearch">返回</p>
                <van-search
                    show-action
                    placeholder="搜索您需要的商品"
                    class="search-a"
                    shape="round"
                    background="none"
                    @click="searchAll"
                    v-model="msg"
                    >
                    <div slot="action" @click="handelSearch">搜索</div>
                </van-search>
            </div>
            <div class="smallSearch" v-show="!ssearch">
                 <p class="title"><span>Hot</span>热门搜索</p>
                 <ul class="searchHot">
                     <li v-for="(item,index) in hots" :key="index" @click="hotsearch(item)">{{item}}</li>
                 </ul>
            </div>
            <div v-show="ssearch">
                <div class="swiper-container carousel">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <img :src="banner" />
                        </div>
                    </div>
                </div>

                <div class="nav">
                <ul class="nav-ul">
                    <!-- <li v-for="item in navs" :key="item.cate_name">
                        <img :src="item.cate_image" alt="">
                        <span>{{item.cate_name}}</span>
                    </li> -->
                    <router-link to="/home/le6ji" tag="li">
                        <img :src="navs[0].cate_image" alt="">
                        <span>{{navs[0].cate_name}}</span>
                    </router-link>
                    <router-link to="/home/teSeGuan" tag="li">
                        <img :src="navs[1].cate_image" alt="">
                        <span>{{navs[1].cate_name}}</span>
                    </router-link>
                    <router-link to="/home/leXianYu" tag="li">
                        <img :src="navs[2].cate_image" alt="">
                        <span>{{navs[2].cate_name}}</span>
                    </router-link>
                    <router-link to="/home/dianS" tag="li">
                        <img :src="navs[3].cate_image" alt="">
                        <span>{{navs[3].cate_name}}</span>
                    </router-link>
                </ul>
                </div>

                <div>
                    <div class="le6ji">
                        <img src="/libs/imgs/imgLe6Ji.png" />
                    </div>
                    <div class="tri_img" @click="toggleLe">
                        <img :src="le6ji" alt="">
                    </div>
                    <div class="more" @click="toggleLe">
                        <p>查看全部</p>
                        <p>see more</p>
                    </div>
                </div>

                <div>
                    <div class="le6ji">
                        <img src="/libs/imgs/teseguan.png" />
                    </div>
                    <div class="tri_img" @click="toggleTe">
                        <img :src="teseguan" alt="">
                    </div>
                    <div class="pics">
                        <ul>
                            <li v-for="item in pics" :key="item.goods_id">
                                <div class="img">
                                    <img :src="item.goods_image" alt="">
                                    <p class="words">{{item.goods_name}}</p>
                                    <p class="price">￥ {{item.goods_price}}</p>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <!-- 注册全局组件goods -->
                    <goods
                    :goods="goods"
                    :recommend="recommend"
                    ></goods>

                </div>
            </div>
        </div>
    </div>
</template>
<script>
import Vue from 'vue'
import { Search } from 'vant'
import axios from 'axios'
import Swiper from 'swiper'
import 'swiper/css/swiper.min.css'
import { mapState } from 'vuex'
Vue.use(Search)

export default {
  data () {
    return {
      show: '',
      banner: '',
      navs: [],
      le6ji: '',
      teseguan: '',
      pics: [],
      goods: [],
      recommend: [],
      ssearch: true,
      hots: [],
      msg: ''
    }
  },
  mounted () {
    // 设置axios为form-data
    axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
    axios.defaults.headers.get['Content-Type'] = 'application/x-www-form-urlencoded'
    axios.defaults.transformRequest = [function (data) {
      let ret = ''
      for (const it in data) {
        ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
      }
      return ret
    }]
    // 然后再修改原型链
    Vue.prototype.$axios = axios

    // let wrapper = document.querySelector('.wrapper')
    // let scroll = new BScroll(wrapper)
    let page = 0
    window.onscroll = () => {
      // console.log(document.documentElement.scrollTop)
      // 监听滚动条事件，当滚动条距离顶部大于120的时候显示搜索框的background
      if (document.documentElement.scrollTop > 120) {
        this.$refs.search.style.background = 'red'
      } else {
        if (this.$refs.search) {
          this.$refs.search.style.background = 'none'
        }
      }

      // 监听滚动条事件，当滚动条到底部时去请求新的数据
      const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
      const clientHeight = document.documentElement.clientHeight || document.body.clientHeight
      const scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight
      if (scrollTop + clientHeight == scrollHeight) {
        page++
        console.log(page)
        axios.post('/lct?api_version=2.3.0&platType=2&client=wap&isEncry=0&time=1583321638492&act=goods&op=goodsRecom_new', {
          provinc: this.province_id,
          city: this.city_id,
          page: page,
          pageSize: 10
        }).then(res => {
          // console.log(res.data.datas.list)
          this.recommend.push(...res.data.datas.list)
          console.log(this.recommend)
        })
      }
    }

    // ajax请求
    axios.post('/lct?api_version=2.3.0&platType=2&client=wap&isEncry=0&time=1583303456775&act=index&op=index&key=aaa6d1d65ee91feb23a008280872dfdf', {
      province_id: this.province_id,
      city_id: this.city_id,
      qiang_zhi_geng_xin: ''
    }).then(res => {
      console.log('数据', res.data)
      this.show = res.data
      this.banner = res.data.datas.adv[0].adv_image
      new Swiper('.swiper-container')
      this.navs = res.data.datas.platform.list
      console.log(this.navs);
      
      this.le6ji = res.data.datas.le6ji.le6ji_img
      this.teseguan = res.data.datas.feature.feature_img
      this.pics = res.data.datas.feature.recommend_goods
      this.goods = res.data.datas.category_goods
      //    console.log(res.data)
      //    console.log(res.data.datas.category_goods)
    })

    axios.post('/lct?api_version=2.3.0&platType=2&client=wap&isEncry=0&time=1583479386025&act=goods&op=hotWord', {
      api_version: '2.3.0',
      platType: '2',
      client: 'wap',
      isEncry: '0',
      time: '1583479386025',
      act: 'goods',
      op: 'hotWord'
    }).then(res => {
      this.hots = res.data.datas.list
      console.log(this.hots)
    })
  },
  methods: {
    toggleLe () {
      this.$router.push('/home/le6ji')
    },
    toggleTe () {
      this.$router.push('/home/teSeGuan/nt/2')
    },
    address () {
      this.$router.push('/address')
    },
    searchAll () {
      this.ssearch = false
    },
    All () {
      this.ssearch = true
    },
    handelSearch () {
      this.$router.push({
        path: '/search',
        query: {
          keyword: this.msg
        }
      })
    },
    hotsearch (msg) {
      this.msg = msg
    }
  },
  computed: {
    ...mapState(['province_id', 'city_id', 'city_name'])
  },
  destroyed () {
    window.onscroll = null
  }
}
</script>

<style lang="scss" scoped>
    .red{
        background: red !important;
    }
    .bac{
        background:rgb(238, 237, 237);
        margin-bottom: 50px;
        width:100%;
        // height:100%;
        // overflow:hidden
        // height: 100%;
    }
    .search{
        width:100%;
        padding-left: 10px;
        padding-right: 10px;
        display: flex;
        align-items: center;
        position: fixed;
        z-index: 10;
        justify-content: space-around;
        .search-a{
            width: 70%;
            margin-right: 20px;
        }
        .area{
            font-size: 16px;
            margin-right: 10px;
            color: #fff;
        }
    }
    .carousel{
        width: 100%;
        height: 200px;
        img{
            width:100%;
            height:100%;
        }
    }
    .nav{
        width: 100%;
        height: 95px;
        .nav-ul{
            display:flex;
            height: 100%;
            width: 100%;
            background: #fff;
            li{
                flex: 1;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                img{
                    width: 38px;
                    height: 38px;
                    margin-bottom: 8px;
                }
                span{
                    font-size: 12px;
                }
            }
        }
    }
    .scrollactive{
        background:red;
        color:#fff;
    }
    .le6ji{
        width:100%;
        height:33px;
        display:flex;
        align-items: center;
        justify-content: center;
        img{
            height:15px;
        }
    }
    .tri_img{
        height:100px;
        width:100%;
        img{
            width:100%;
            height:100%;
        }
    }
    .more{
        display:flex;
        align-items: center;
        justify-content: center;
        height: 165px;
        width: 105px;
        flex-direction: column;
        background: rgb(255, 255, 255);
        :nth-child(1){
            font-size: 20px;
            margin-bottom: 10px;
        };
        :nth-child(2){
            font-size: 13px;
            color: rgb(151, 144, 144);
        }
    }
    .pics{
        height:165px;
        width:100%;
        ul{
            display:flex;
            width:100%;
            height:100%;
            overflow: scroll;
            background: #fff;
            li{
                height:100%;
                // width:135px;
                font-size:12px;
                width: 33%;
                flex-shrink: 0;
                padding: 5px;
                box-sizing: border-box;
                .img{
                    width: 100%;
                    height: 100px;
                    img{
                        width: 100%;
                        height: 100%;
                    }
                    .words{
                        font-size: 13px;
                        line-height: 18px;
                        -webkit-line-clamp: 2;
                        -webkit-box-orient: vertical;
                        overflow: hidden;
                        display: -webkit-box;
                    }
                    .price{
                        text-align: center;
                        color: red;
                    }
                }
            }
        }
    }
    .smallSearch{
        // padding-top: 50px;
        padding-left: 15px;
        padding-right: 15px;
        background: #fff;
        box-sizing: border-box;
        .title{
            // margin-top: 10px;
            padding-top: 60px;
            box-sizing: border-box;
            font-size: 16px;
            background: #fff;
            span{
                color: red;
            }
        }
        .searchHot{
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            margin-top: 20px;
            li{
                height: 30px;
                // background: red;
                margin-bottom: 20px;
                border-radius: 15px;
                font-size: 16px;
                justify-content: space-between;
                display: flex;
                align-items: center;
                padding:10px;
                box-sizing: border-box;
                border: 1px solid #ccc;
                color: rgb(0, 0, 0);
            }
        }
    }
</style>
